<template>
  <ul>
    <li v-for="item in verticalList" :key="item.icon" @click="handleClick(item)" :class="{clicked: item.clicked}">
      <div class="content" v-if="item.content != '清空'">
        <img :src="item.icon" style="width: 16px; height: 16px; margin-left: 4px;" />
        <div>{{item.content}}</div>
      </div>
      <div class="content" v-else>
        <img :src="item.icon" style="width: 16px; height: 16px; margin-left: 4px;" />
        <div>{{item.content}}</div>
      </div>
    </li>
  </ul>
</template>

<script>
  // import {
  //   IconPark
  // } from '@icon-park/vue/es/all';
  export default {
    name: "item",
    // components: {
    //   IconPark
    // },
    data() {
      return {
        verticalList: [{
            icon: "back",
            content: "撤销",
            code: "undo",
            icon: require('../../../../../../assets/svg/cancel.svg')
          },
          {
            icon: "download",
            content: "下载",
            code: "download",
            icon: require('../../../../../../assets/svg/download.svg')
          },
          {
            icon: "frameSelection",
            content: "框选",
            code: "frameSelection",
            icon: require('../../../../../../assets/svg/frameSelection.svg')
          },
          {
            icon: "empty",
            content: "清空",
            code: "empty",
            icon: require('../../../../../../assets/svg/empty.svg')
          }
        ],
      }
    },
    methods: {
      handleClick(params) {
        params.clicked = !params.clicked;
        switch (params.content) {
          case "撤销":

            break;
          case "下载":
            this.$eventBus.$emit("download");
            break;
          case "全屏":
            this.$eventBus.$emit("fullScreen");
            break;
          case "框选":
            if (params.clicked) {
              // 被选中状态下
              this.$eventBus.$emit("change_mode", "box-select");
            } else {
              this.$eventBus.$emit("change_mode", "default");
            }
            break;
          case "清空":
            this.$confirm('是否确认清空当前画布上的全部图谱？清空后不可恢复', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$eventBus.$emit("clear_graph");
              if (!this.$store.state.hasGraph) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                params.clicked = false;
              }
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
              params.clicked = false;
            });
            break;
        }
      },

      open() {},
    },
    watch: {
      // "$store.state.hasGraph": {
      //   handler(newVal,oldVal) {
      //     if(newVal) 
      //   }
      // }
    }
  }
</script>

<style lang="scss" scoped>
  ul {
    width: 48px;

    li {
      width: 48px;
      height: 48px;
      background: #FFFFFF;
      margin-bottom: 4px;
      font-size: 12px;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      color: #616A85;
      font-family: MicrosoftYaHei;
      justify-content: center;
      align-items: center;

      &:hover {
        background-color: wheat;
      }

      .icon {
        position: relative;
        // width: 100%;
        // height: 100%;

        span {
          position: absolute;
          left: 16px;
          top: 4px;
        }
      }

      // .content {
      //     position: relative;
      //     top: 20px;
      //     text-align: center;
      // }
    }

    // li {
    //   width: 48px;
    //   height: 48px;
    //   background: #FFFFFF;
    //   box-shadow: 0px 2px 2px 2px rgba(172, 176, 191, 0.14);
    //   border-radius: 2px;
    //   margin-bottom: 4px;
    //   font-size: 12px;
    //   cursor: pointer;
    //   opacity: .3;

    //   &.clicked {
    //     opacity: 1;
    //   }

    //   .icon {
    //     position: relative;

    //     span {
    //       position: absolute;
    //       left: 16px;
    //       top: 4px;
    //     }
    //   }

    //   .content {
    //     position: relative;
    //     top: 20px;
    //   }
    // }
  }
</style>